<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

	<!--- Some jquery stuff --->
	<link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
    <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../../scripts/Thrive.js"  type="text/javascript"></script>
    <script src="AccountControl.js" type="text/javascript"></script>
    <script src="../Feel/Feel.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>

<body>

	<div id="demographics" data-role="page">
    
	<script type="text/javascript">
		$("#demographics").live('pageinit', function() {
			dem_prefetch();
		});
        
        $("#not-sure-0").live("change" , function() {
            toggleParent1();
        });
        
        $("#not-sure-1").live("change" , function() {
            toggleParent2();
        });
    </script>
    
    <div data-role="header">
        <h1>Create an Account</h1>
        <a href="create.html" data-icon="delete" class="ui-btn-right" data-transition="slide" data-direction="reverse">Cancel</a>
    </div>
		
	<form id="demographics_form" selected="true">
		<fieldset>
        	<input type="hidden" name="share" id="share" value="false"  >
        
        	<div class="row">
            	<div data-role="fieldcontain">
                    <label for="age">Age:</label>
                    <input type="number" name="age" id="age" value=""  />
                </div>
            </div>
            
            <div class="row">
            	<div data-role="fieldcontain">
                    <label for="grade">Grade:</label>
                    <input type="number" name="grade" id="grade" value=""  />
                </div>
            </div>
            
            <div class="row">
            	<div data-role="fieldcontain">
            	<fieldset data-role="controlgroup" data-type="horizontal" > 
					<legend>Sex:</legend>
                    <input type="radio" name="sex" id="male" value="male" checked="checked" />
         			<label for="male">Male</label>

         			<input type="radio" name="sex" id="female" value="female"  />
         			<label for="female">Female</label>
                </fieldset>
                </div>
            </div>
            
            <div class="row">
            	<div data-role="fieldcontain">
            	<fieldset data-role="controlgroup"> 
					<legend>Ethnicity:</legend>
                    <input type="radio" name="ethnicity" id="asian" value="asian" checked="checked" />
         			<label for="asian">Asian</label>

         			<input type="radio" name="ethnicity" id="black" value="black"  />
         			<label for="black">Black</label>
                    
                    <input type="radio" name="ethnicity" id="first-nations" value="first-nations" />
         			<label for="first-nations">First Nations</label>

         			<input type="radio" name="ethnicity" id="hispanic" value="hispanic"  />
         			<label for="hispanic">Hispanic</label>
                    
                    <input type="radio" name="ethnicity" id="white" value="white" />
         			<label for="white">White</label>

         			<input type="radio" name="ethnicity" id="other" value="other"  />
         			<label for="other">Other</label>
                </fieldset>
                </div>
            </div>
            
            <div id="parent" class="row">
				<div data-role="fieldcontain">
                	<label>What are your parents' jobs?</label>
                	
                    <label for="parent1">Parent 1:</label>
                    <input type="text" name="parent1" id="parent1" value=""  />
                    <fieldset data-role="controlgroup" > 
                        <input type="checkbox" name="not-sure-0" id="not-sure-0" value="not-sure-0" />
                        <label for="not-sure-0">Not Sure</label>
                    </fieldset>

                    <label for="parent2">Parent 2:</label>
                    <input type="text" name="parent2" id="parent2" value=""  />
                    <fieldset data-role="controlgroup" > 
                        <input type="checkbox" name="not-sure-1" id="not-sure-1" value="not-sure-1" />
                        <label for="not-sure-1">Not Sure</label>
                    </fieldset>
                </div>
            </div>       
            <div class="row">
            	<div data-role="fieldcontain">
            	<fieldset data-role="controlgroup" data-type="horizontal" > 
					<legend>Do you have a touchscreen phone?</legend>
                    <input type="radio" name="touchscreen" id="yes" value="yes" checked="checked" />
         			<label for="yes">Yes</label>

         			<input type="radio" name="touchscreen" id="no" value="no"  />
         			<label for="no">No</label>
                </fieldset>
                </div>
            </div>
            
			<div class="row">
			<label for="use" class="select">When do you use your phone?</label>
            <select name="use" id="use">
                <option value="home">Only at home</option>
                <option value="friends">With friends</option>
                <option value="school">At school</option>
                <option value="all">All of the above</option>
            </select>
            </div>
		</fieldset>
		<a type="submit" href="login.html" data-role="button" data-transition="flip" data-direction="reverse">Submit</a>
	</form>
    
    </div>
</body>

</html>
